<template>
  <div class="listView">
    <div class="step1_header">
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="background: #2f54eb"
        size="small"
        @click="() => handleOperate()"
        >新增</el-button
      >
      <el-button
        icon="el-icon-delete"
        type="danger"
        size="small"
        @click="handleDelete"
        :disabled="!chooseList.length"
        >删除</el-button
      >
      <el-popover
        placement="right"
        width="400"
        trigger="click"
        title="批量操作"
        ref="popover"
      >
        <div style="margin-bottom: 12px">
          <span
            style="
              font-size: 14px;
              display: inline-block;
              width: 80px;
              text-align: right;
              color: #333;
              font-weight: bold;
              margin-right: 12px;
            "
            >对齐方式</span
          ><el-radio-group v-model="operateMore.align">
            <el-radio
              :label="item.value"
              v-for="item in dict.type.pt_app_page_align"
              :key="item.id"
              :value="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </div>
        <div style="margin-bottom: 12px">
          <span
            style="
              font-size: 14px;
              display: inline-block;
              width: 80px;
              text-align: right;
              color: #333;
              font-weight: bold;
              margin-right: 12px;
            "
            >固定宽度</span
          ><el-input-number
            v-model="operateMore.width"
            :min="0"
          ></el-input-number>
        </div>
        <div style="margin-bottom: 12px">
          <span
            style="
              font-size: 14px;
              display: inline-block;
              width: 80px;
              text-align: right;
              color: #333;
              font-weight: bold;
              margin-right: 12px;
            "
            >是否显示</span
          ><el-radio-group v-model="operateMore.hidden">
            <el-radio label="NO">是</el-radio>
            <el-radio label="YES">否</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 12px">
          <span
            style="
              font-size: 14px;
              display: inline-block;
              width: 80px;
              text-align: right;
              color: #333;
              font-weight: bold;
              margin-right: 12px;
            "
            >是否排序</span
          ><el-radio-group v-model="operateMore.sortable">
            <el-radio label="NO">是</el-radio>
            <el-radio label="YES">否</el-radio>
          </el-radio-group>
        </div>
        <div style="display: flex; justify-content: flex-end">
          <el-button
            type="primary"
            style="background: #2f54eb"
            size="small"
            @click="() => handleAlllMore()"
            >确定</el-button
          >
        </div>
        <el-button
          type="primary"
          slot="reference"
          style="background: #2f54eb; margin-left: 10px"
          size="small"
          >批量操作</el-button
        >
      </el-popover>
    </div>
    <div class="table">
      <el-table
        :data="list_step1"
        border
        style="width: 100%"
        size="mini"
        row-key="uuid"
        key="step1"
        ref="multipleTable"
        class="step1Table"
      >
        <el-table-column width="55" align="center">
          <template>
            <i class="el-icon-s-operation moveIcon"></i>
          </template>
        </el-table-column>
        <el-table-column width="55" align="center">
          <template slot="header">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="indeterminate"
              @change="handleCheckAllChange"
            ></el-checkbox>
          </template>
          <template slot-scope="scope">
            <el-checkbox
              v-model="ischeckedItem[`${scope.$index}`]"
              @change="getCurrentRow(scope.row)"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="序号" width="55" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="field"
          label=""
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot="header">
            <div class="header">
              <span class="require">*</span>
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">列标识</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div
              class="clickoutsideClass"
              v-clickoutside="() => handleClickOutside(scope, 'field')"
            >
              <p
                v-show="!scope.row[`isShow${'field'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'field')"
              >
                {{ scope.row.field }}
              </p>
              <el-input
                v-show="scope.row[`isShow${'field'}`]"
                v-model="scope.row.field"
                clearable
              />
              <p class="tableInputRules" v-show="scope.row[`isShow${'field'}`]">
                列标识不能为空
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="label" align="center">
          <template slot="header">
            <div class="header">
              <span class="require">*</span>
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">列名称</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div
              class="clickoutsideClass"
              v-clickoutside="() => handleClickOutside(scope, 'label')"
            >
              <p
                v-show="!scope.row[`isShow${'label'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'label')"
              >
                {{ scope.row.label }}
              </p>
              <el-input
                v-show="scope.row[`isShow${'label'}`]"
                v-model="scope.row.label"
                clearable
              />
              <p class="tableInputRules" v-show="scope.row[`isShow${'label'}`]">
                列名称不能为空
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" align="center">
          <template slot="header">
            <div class="header">
              <span class="require">*</span>
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">列类型</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'type')">
              <p
                v-show="!scope.row[`isShow${'type'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'type')"
              >
                {{
                  selectDictLabel(
                    dict.type.pt_app_form_column_type,
                    scope.row.type
                  )
                }}
              </p>
              <div v-show="scope.row[`isShow${'type'}`]">
                <el-select
                  v-model="scope.row.type"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                  @change="(value) => handleQuTypeChange(value, scope)"
                >
                  <el-option
                    v-for="item in dict.type.pt_app_form_column_type"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="align" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">对齐方式</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'align')">
              <p
                v-show="!scope.row[`isShow${'align'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'align')"
              >
                {{
                  selectDictLabel(dict.type.pt_app_page_align, scope.row.align)
                }}
              </p>
              <div v-show="scope.row[`isShow${'align'}`]">
                <el-select
                  v-model="scope.row.align"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in dict.type.pt_app_page_align"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="minWidth" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">最小宽度</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'minWidth')">
              <p
                v-show="!scope.row[`isShow${'minWidth'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'minWidth')"
              >
                {{ scope.row.minWidth }}
              </p>
              <div v-show="scope.row[`isShow${'minWidth'}`]">
                <el-input-number
                  v-model="scope.row.minWidth"
                  :min="50"
                  :max="300"
                ></el-input-number>
              </div>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="width" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">固定宽度</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'width')">
              <p
                v-show="!scope.row[`isShow${'width'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'width')"
              >
                {{ scope.row.width }}
              </p>
              <div v-show="scope.row[`isShow${'width'}`]">
                <el-input-number
                  v-model="scope.row.width"
                  :min="0"
                  :max="300"
                  style="width: 90%"
                ></el-input-number>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="hidden" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt" style="margin-right: 10px">是否显示</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <el-checkbox-group v-model="scope.row.hidden">
                <el-checkbox true-label="NO" false-label="YES"></el-checkbox>
              </el-checkbox-group>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sortable" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">是否排序</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <el-checkbox-group v-model="scope.row.sortable">
                <el-checkbox true-label="NO" false-label="YES"></el-checkbox>
              </el-checkbox-group>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fixed" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">固定列</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'fixed')">
              <p
                v-show="!scope.row[`isShow${'fixed'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'fixed')"
              >
                {{
                  selectDictLabel(dict.type.pt_app_page_fixed, scope.row.fixed)
                }}
              </p>
              <div v-show="scope.row[`isShow${'fixed'}`]">
                <el-select
                  v-model="scope.row.fixed"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in dict.type.pt_app_page_fixed"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="format" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">数据转换配置</span>
            </div>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              :class="[scope.row.format ? 'isData' : null]"
              @click="handleDataConfig(scope)"
              :disabled="scope.row.type !== 'date' && scope.row.type !== 'dic' && scope.row.type !== 'custom' && scope.row.type !== 'customLogic'"
              >配置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import Clickoutside from "element-ui/src/utils/clickoutside";
import { uuid } from "vue-uuid";
export default {
  name: "listView",
  directives: {
    Clickoutside,
  },
  dicts: ["pt_app_form_column_type", "pt_app_page_fixed", "pt_app_page_align"],
  props: {
    dataConfigOpenFun: {
      type: Function,
      default: () => {},
    },
    dataConfigClose: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      columnNameRules: "",
      chooseList: [],
      list_step1: [],
      checkAll: false,
      indeterminate: false,
      ischeckedItem: {},
      configIndex: undefined,
      operateMore: {},
    };
  },
  watch: {
    chooseList: {
      immediate: true,
      deep: true,
      handler() {
        if (
          this.chooseList?.length &&
          this.chooseList?.length === this.list_step1?.length
        ) {
          this.checkAll = true;
          this.indeterminate = false;
        } else if (this.chooseList?.length) {
          this.indeterminate = true;
          this.checkAll = false;
        } else if (!this.chooseList?.length) {
          this.checkAll = false;
          this.indeterminate = false;
        }
      },
    },
  },
  mounted() {
    if (
      sessionStorage.getItem("pageModel") &&
      JSON.parse(sessionStorage.getItem("pageModel"))?.step2
    ) {
      this.list_step1 = JSON.parse(sessionStorage.getItem("pageModel"))?.step2;
    }
    this.$nextTick(() => {
      this.rowDrop();
    });
  },

  methods: {
    handleAlllMore() {
      this.$refs.popover.doClose();
      this.list_step1.forEach((item) => {
        for (let key in this.operateMore) {
          if (this.operateMore[key]) {
            item[key] = this.operateMore[key];
          }
        }
      });
    },
    handleQuTypeChange(value, scope) {
      if (value !== "dic" && value !== "date") {
        this.$set(this.list_step1, [scope.$index], {
          ...this.list_step1[scope.$index],
          formatName: undefined,
          format: undefined,
        });
      }
    },
    getConfigData(type, value) {
      if (value) {
        if (type === "date") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            format: value,
          });
        }
        if (type === "dic") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            format: value.dictType,
            formatName: value.dictName,
            formatType:value.activeName
          });
        }
        if(type === "custom"){
           this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            format: value,
          });
        }
        if(type === "customLogic"){
           this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            format: value,
          });
        }
      }
      this.dataConfigClose();
    },
    handleDataConfig(scope) {
      this.configIndex = undefined;
      if (scope.row.type === "date" || scope.row.type === "dic" || scope.row.type === "custom" || scope.row.type === "customLogic" ) {
        this.configIndex = scope.$index;
        this.dataConfigOpenFun(scope.row);
      }
    },
    getCurrentRow(key) {
      let isHas = false;
      for (const item of this.chooseList) {
        if (item.uuid === key.uuid) {
          this.chooseList = this.chooseList.filter(
            (val) => val.uuid !== key.uuid
          );
          isHas = true;
          break;
        }
      }
      if (!isHas) {
        this.chooseList.push(key);
      }
    },
    handleOperate() {
      this.list_step1 = [
        ...this.list_step1,
        {
          uuid: uuid.v1(),
          type: "varchar",
          align: "center",
          hidden: "NO",
          fixed: "none",
          sortable:"YES"
        },
      ];
    },
    handleCheckAllChange(val) {
      if (val) {
        this.chooseList = [...this.list_step1];
        this.chooseList.forEach((item, index) => {
          this.$set(this.ischeckedItem, index, true);
        });
      } else {
        this.chooseList = [];
        for (let key in this.ischeckedItem) {
          this.ischeckedItem[key] = false;
        }
      }
    },
    handleClickOutside(scope, type) {
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        [`isShow${type}`]: false,
      });
    },
    handleInputEdit(scope, type) {
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        [`isShow${type}`]: true,
      });
    },
    handleDelete() {
      this.$confirm("此操作将删除选中数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list_step1 = this.list_step1.filter(
            (item) => !this.chooseList.some((ele) => ele.uuid === item.uuid)
          );
          this.chooseList = [];
          this.ischeckedItem = {};
        })
        .catch(() => {});
    },
    rowDrop() {
      const tbody = document.querySelectorAll(
        ".step1Table .el-table__body-wrapper tbody"
      )[0];
      const _this = this;
      Sortable.create(tbody, {
        animation: 150,
        ghostClass: "ghost",
        handle: ".moveIcon",
        onEnd({ newIndex, oldIndex }) {
          const list = JSON.parse(JSON.stringify(_this.list_step1));
          const currRow = list.splice(oldIndex, 1)[0];
          list.splice(newIndex, 0, currRow);
          _this.list_step1 = [];
          _this.chooseList = [];
          _this.ischeckedItem = {};
          _this.checkAll = false;
          _this.indeterminate = false;
          _this.$nextTick(() => {
            _this.list_step1 = list;
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.listView {
  .ghost {
    opacity: 0.4;
  }
  .table {
    margin-top: 8px;
    .tr_txt {
      margin: 0;
      height: 36px;
      line-height: 36px;
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .clickoutsideClass {
      position: relative;
    }
    ::v-deep .el-table .cell {
      overflow: visible;
    }
    ::v-deep .el-table__body-wrapper {
      overflow: visible;
    }
    .tableInputRules {
      // display: inline-block;
      border-radius: 4px;
      padding: 8px 12px;
      color: #fff;
      background-color: #f56c6c;
      pointer-events: auto;
      position: absolute;
      z-index: 999999;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 100%;
    }
    ::v-deep .el-icon-s-operation {
      font-size: 24px;
      cursor: move;
    }
    ::v-deep .header {
      display: flex;
      align-items: center;
      justify-content: center;
      .require {
        color: red;
        margin-top: 8px;
        margin-right: 3px;
        font-size: 18px;
      }
      .el-icon-edit-outline {
        font-size: 18px;
        margin-right: 5px;
      }
    }
    .isData {
      position: relative;
      &::after {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        background: red;
        border-radius: 50%;
        position: absolute;
        top: -3px;
        right: -2px;
      }
    }
  }
}
</style>
